<template>
  <!-- 订单详情 -->
  <el-dialog
    v-model="dialogVisible"
    width="720px"
    class="ordera-custom-class"
    :before-close="onCloseFunc"
  >
    <div class="detail-box flex fw">
      <div class="detail-items flex">
        <span class="title">租借用户：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">设备归属：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">租借手机号：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">租借方式：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">租借时长：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">设备二维码：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">设备型号：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">弹出电量：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">弹出孔位：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">充电宝ID：</span>
        <div class="content">微信用户</div>
      </div>
      <div class="detail-items flex">
        <span class="title">租借策略：</span>
        <div class="content">
          微信用户微信用户微信用户微信用户微信用户微信用户微信用户微信用户
          微信用户微信用户微信用户微信用户微信用户微信用户微信用户微信用户微信用户微信用户
        </div>
      </div>
    </div>
    <template #header>
      <div class="order-dislog-title">订单详情</div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          class="btn-block1"
          type="primary"
          @click="tKialogVisible = true"
          v-if="typeStr == 'buyOut'"
        >
          退款
        </el-button>
        <el-button
          class="btn-block1"
          type="primary"
          @click="onCloseFunc"
          v-if="typeStr == 'order'"
        >
          分润
        </el-button>
        <el-button
          class="btn-block2"
          type="primary"
          @click="onCloseFunc"
          v-if="typeStr == 'order'"
        >
          结束订单
        </el-button>
        <el-button
          class="btn btn-block3"
          type="info"
          plain
          @click="onCloseFunc"
        >
          加入黑名单
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 确认退款金额 -->
  <el-dialog
    v-model="tKialogVisible"
    title="退款金额"
    width="500px"
    class="tk-dislog-box"
  >
    <el-form :model="tkForm" label-width="140px" label-position="left">
      <el-form-item label="请输入退款金额">
        <el-input class="tk-input-box" v-model="tkForm.name" v-inputLimt="2" />
        <span class="tk-span">元</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="tKialogVisible = false">
          确认退款
        </el-button>
        <el-button @click="tKialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  typeStr: {
    type: String,
    default: '',
  },
})
let tkForm = ref({})
let tKialogVisible = ref(false)

let dialogVisible = ref(false)
watch(
  () => props.show,
  (newValue, oldValue) => {
    dialogVisible.value = props.show
  }
)
const emit = defineEmits(['onClose'])
const onCloseFunc = () => {
  emit('onClose', false)
}
</script>
<style lang="scss">
.ordera-custom-class {
  border-radius: 12px !important;
}
.el-dialog__body {
  padding: 20px;
}
.order-dislog-title {
  font-weight: 500;
  font-size: 16px;
  color: #1b2431;
  border-bottom: 1px solid #dde2ee;
  padding-bottom: 14px;
}
.detail-box {
  width: 100%;
  max-height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  .detail-items {
    width: 50%;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #1b2431;
    .title {
      color: #828a9d;
      width: 100px;
    }
    .content {
      font-weight: 400;
      font-size: 14px;
      color: #1b2431;
      line-height: 20px;
      width: calc(100% - 120px);
    }
  }
}
.btn {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
.btn-block1 {
  width: 52px;
  height: 36px;
  background: #3d7fff;
  border-radius: 3px;
}
.btn-block2 {
  width: 80px;
  height: 36px;
  background: #3d7fff;
  border-radius: 3px;
}
.btn-block3 {
  width: 94px;
  height: 36px;
  background: #f0f2f5;
  border-radius: 3px;
  border: 1px solid #d7dbe0;
}

.tk-dislog-box {
  border-radius: 8px;
  .tk-input-box {
    width: 230px;
    height: 36px;
    border-radius: 4px;
  }
  .tk-span {
    font-weight: 400;
    font-size: 14px;
    color: #1b2431;
    margin-left: 10px;
  }
}
</style>
  